<!-- 登录组件 keep-alive -->
<template>
    <div class="box">
        <table>
            <tr>
                <td>账号</td>
                <td>
                    <input v-model="from.login" type="text">
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input v-model="from.psd" type="password"></td>
            </tr>
        </table>
        <button @click="submit">登录</button>
    </div>
</template>

<script setup lang='ts'>
import { onActivated, onDeactivated, onMounted, onUnmounted, reactive } from 'vue'

const from = reactive({
    login: '',
    psd: '',
})

const submit = () => {
    console.log(from)
}

onMounted(() => {
    console.log('onMounted')
})

onUnmounted(() => { // keep-alive 不会 执行
    console.log('onUnmounted')
})

onActivated(() => { // keep-alive 会执行
    console.log('onActivated')
})

onDeactivated(() => { // kepp-alive 切换时执行
    console.log('onDeactivated')
})

</script>

<script lang="ts">
export default {
    name: 'Login'
}

</script>
<style lang='less' scoped>
.box {
    width: 500px;
    height: 500px;
    background: red;
}
</style>